<template>
  <div class="login_container">
    <div class="login_box">
<span class="wenzi">登录页面</span>
      <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="login_form"
          label-width="0px"
      >
        <el-form-item prop="username">
          <el-input
              v-model="loginForm.username"
              prefix-icon="iconfont icondenglu"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
              v-model="loginForm.password"
              prefix-icon="iconfont iconmima"
              type="password"
          ></el-input>
        </el-form-item>
        <!-- <el-checkbox v-model="checked" class="loginRem">记住我</el-checkbox> -->
        <el-form-item class="btns">
          <el-button type="primary" @click="resetLoginForm" style="width: 90px"> 重    置 </el-button>
          <el-button type="success" @click="login">用 户 登 录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "../../api/adminApi"
import config from "../../config/config"
import md5 from "blueimp-md5"
export default {
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
      },
      loginRules: {
        name: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 2, max: 8, message: "密码为 2~8 位", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    resetLoginForm() {
      //重置函数方法
      this.$refs.loginFormRef.resetFields();
    },

    login() {
       this.$refs.loginFormRef.validate(async (valid) => {
        if(valid){
          // 发请求
          let res = await checkLogin(this.loginForm.username,md5(this.loginForm.password,config.KEY));
          console.log(res);
          if(res.status != 1){
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          // token 一个令牌  有的接口需要带着这个令牌去访问
          // 没有令牌接口是调用失败的
          // 登录成功后，服务器返回令牌，令牌需要存起来，目的是后面调用其它接口，可以使用令牌
          // 令牌存储sessionStorage中，会话结束，令牌就没了  
          // 令牌并不是一直有效的，是有生存周期，到时候，token会自动失效，令牌是后端程序员设置
          window.sessionStorage.setItem("token",res.data.token);
          window.sessionStorage.setItem("user",JSON.stringify(res.data));

          // 跳到后台首页面
          this.$router.replace("/home")
        }else{
          console.log("校验不通过");
          return false;
        }
      })
    },
  },
};
</script>

<style lang="less" scoped>
.wenzi{
    margin: 40px auto;
    display:block;
    text-align: center;
    font-size: 30px;
    color: rgb(15, 123, 239);

}
// 跟节点样式
.login_container {
  // background-color: #2b4b6b;
  // background-image: image();
  background-image: url(../../assets/images/login_bg.jpg);
  height: 100%;
}
// 登录框
.login_box {
  width: 450px;
  height: 300px;
  background-color: rgb(182, 197, 201);
  background-image: url(../../assets/images/login_center_bg.png);
  border-radius: 3px; // 圆角
  position: absolute; // 绝对定位
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); // 根据自己位置 以自己为长度位移
  // 头像框
  .avatar_box {
    width: 130px;
    height: 130px;
    border: 1px solid #eee;
    border-radius: 50%; // 加圆角
    padding: 10px;
    box-shadow: 0 0 10px #ddd; // 盒子阴影
    position: absolute;
    opacity: 0.8; //透明属性
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgb(66, 152, 202);
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%; // 加圆角
      background-color: #eee;
    }
  }
  .loginRem {
    color: black;
    font-weight: 900;
  }
  .btns {
    display: flex; // 弹性布局
    border-radius: 30px;
    padding: 5px 85px 0 8px;
    justify-content: flex-end; // 尾部对齐
    .bt1 {
      opacity: 0;
      width: 50px;
    }
  }
  .login_form {
    position: absolute;
    bottom: 0%;
    width: 100%;
    padding: 0 50px 0 50px;
    box-sizing: border-box; // 设置边框
  }
}
</style>